import { useGetState } from '@/hooks/useRedux'
import { GlobalInitialState } from '@/redux/slices/global.slice'
import { changeHistoryRoutingList, historyRouting, SettingInitialState } from '@/redux/slices/setting.slice'
import { Tag } from 'antd'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import { CloseOutlined } from '@ant-design/icons'

export default function HistoryRouting() {
    const navigate = useNavigate()
    const { pathname = '' } = useLocation()
    const dispatch = useDispatch()
    const setting = useGetState<SettingInitialState>('setting')
    const { onDeleteHistoryRouting } = useHistoryRouting()

    return (
        <div className="history-routing">
            <div className="history-routing-list">
                {setting?.historyRoutingList.map((item, index) => {
                    return (
                        <Tag
                            className={`cursor-pointer ${pathname === item.path && 'history-routing-active'}`}
                            closable={setting?.historyRoutingList.length !== 1}
                            key={item.title}
                            onClose={() => onDeleteHistoryRouting(item, index)}
                            onClick={() => navigate(`${item.path}${item.params || ''}`)}
                        >
                            {item.title}
                        </Tag>
                    )
                })}
            </div>
            <div
                className="history-routing-close"
                onClick={() => {
                    dispatch(changeHistoryRoutingList({ type: 'DELOTHER', payload: pathname }))
                }}
            >
                <CloseOutlined />
            </div>
        </div>
    )
}

// 历史路由
const useHistoryRouting = () => {
    const { pathname = '', search } = useLocation()
    const { historyRoutingList = [] } = useGetState<SettingInitialState>('setting')
    const { authMenuList = [] } = useGetState<GlobalInitialState>('global')
    const dispatch = useDispatch()
    const navigate = useNavigate()

    // 删除历史路由
    const onDeleteHistoryRouting = (item: historyRouting, index: number) => {
        dispatch(changeHistoryRoutingList({ type: 'DEL', payload: item.path }))
        if (pathname === item.path && index !== 0) {
            navigate(`${historyRoutingList[index - 1].path}${historyRoutingList[index - 1].params || ''}`)
        } else if (pathname === item.path && index === 0) {
            navigate(`${historyRoutingList[index + 1].path}${historyRoutingList[index + 1].params || ''}`)
        }
    }

    // 新增历史路由
    useEffect(() => {
        const menuItem = authMenuList.filter((item) => item.key === pathname)
        const payload = { title: menuItem[0]?.label?.toString()!, path: menuItem[0]?.key!, params: search }
        menuItem.length > 0 && dispatch(changeHistoryRoutingList({ type: 'ADD', payload }))
    }, [pathname, authMenuList])

    return {
        onDeleteHistoryRouting,
    }
}
